<template>
  <div class="content" v-show="state">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left">图层</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="zdClick">退出</el-button>
      </div>
      <div v-for="(o,i) in layers" :key="i" class="text item" @click="itemClick(o)" v-show="show">
       <span>
         <el-image
             style="width: 25px; height: 25px"
             :src="require(`./images/1.png`)"
             fit="fill"></el-image>
       </span>
       <span>{{o.text}}</span>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "layersManger",
  data(){
    return {
      layers:[],
      show:true,
      currentInput:'',
      state:false
    }
  },
  mounted(){
    let res  = require('./data/layers.json')
    this.layers = res
  },
  methods:{
    itemClick(o){
      console.log(o);
      this.$emit('layeritemClick',o)
    },
    zdClick(){
      this.state = false;
      this.$emit('quit3D')
    }
  }
}
</script>

<style scoped>
.text{
  font-size: 10px;
  text-align:left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 230px;
}
</style>
